<script>

export default {
  name: 'person_component',
  data() {
    return {
      name: '',
    }
  },
  methods: {
    addPerson(name) {
      this.$store.commit('person/ADD_PERSON', name);
    },
    addRandom(){
      this.$store.dispatch('person/addRandom', this.name)
    }
  },
  computed: {
    personList() {
      return this.$store.state.person.personList;
    },
    sum() {
      return this.$store.state.count.sum;
    },
    currentSize() {
      return this.$store.getters['person/currentSize'];
    }
  },
  //组件内路由守卫 进入组件前会触发
  beforeRouteEnter(to, from, next) {
    console.log('beforeRouteEnter调用');
    let auth = localStorage.getItem('auth') //获取本地存储的权限
    if (auth === 'full') {
      next()
      return
    }
    alert('权限不足')
    return;
  },
  //组件内路由守卫 离开组件前会触发
  beforeRouteLeave(to, from, next) {
    console.log('beforeRouteLeave调用');
    next();
  }
}
</script>

<template>
  <div >
    <div style="color: red">Count组件的sum值{{sum}}</div>
    <input v-model="name">
    <button @click="addPerson(name);name=''">添加</button>
    <button @click="addRandom">随机添加</button>
    <div>当前数组长度为：{{currentSize}}</div>
    <ul>
      <li v-for="person in personList" :key="person.id">{{ person.name }}</li>
    </ul>
  </div>
</template>

<style scoped>

</style>